<template>
	<view class="user-bar">
		<view class="user-header-box uni-bg-color-blue">
			<view class="user-header">
				<image src="../../../static/images/tem/gloos.jpg" class="user-header-img"></image>
				<view class="user-header-name  uni-text-color-inverse uni-font-size-lg">张三</view>
				<view class="user-login uni-bg-color uni-font-size-sm">登录/注册</view>
			</view>
		</view>
		<view class="user-base">
			<view class="user-order-chunk">
				<view class="user-order-form uni-bg-color ">
					<view class="user-order-form-top uni-font-size-lg">
						<view>我的订单</view>
						<navigator url="/pagesOrder/order-form/order-form" class="user-order-form-top-r uni-font-size-sm uni-text-color-grey">
							全部订单
							<icon-bar name='iconright' :size='20'></icon-bar>
						</navigator>
					</view>
					<view class="user-order-form-list">
						<view class="user-order-form-item uni-font-size-sm" v-for="(item, index) in orderList" :key="index">
							<icon-bar :name='item.icon' :size='50'></icon-bar>
							<view class="user-order-form-item-text">{{item.label}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="user-cell">
				<cell-bar v-for="(item, index) in cellArray" :key="index" :left-icon="item.icon" :title="item.title" :url="item.url"></cell-bar>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderList: [
					{
						label: '待付款',
						icon: 'icondaifukuan'
					},
					{
						label: '待发货',
						icon: 'icondaishouhuo'
					},
					{
						label: '待收货',
						icon: 'icondaishouhuo'
					},
					{
						label: '待评价',
						icon: 'icondaipingjia'
					}
				],
				cellArray: [
					{
						title: '管理地址',
						icon: 'icondizhi',
						url: '/pagesAddress/address/address'
					},{
						title: '客服',
						icon: 'iconkefu',
						url: '/pagesDebris/customer/customer'
					},{
						title: '设置',
						icon: 'iconshezhi'
					}
				]
			};
		}
	}
</script>

<style lang="scss" scoped>
	.user-bar{
		width: 100%;
		.user-header-box{
			width: 100%;
			height: 300upx;
			display: flex;
			align-items: center;
			.user-header{
				width: 100%;
				display: flex;
				align-items: center;
				padding-bottom: 100upx;
				.user-header-img{
					width: 120upx;
					height: 120upx;
					border-radius: 50%;
					overflow: hidden;
					margin-left: 80upx;
					margin-right: 10upx;
				}
				.user-login{
					padding: 0 10upx;
					position: absolute;
					top: 0;
					right: 0;
					height: 50upx;
					border-top-left-radius: 25upx ;
					border-bottom-left-radius: 25upx ;
					display: flex;
					align-items: center;
				}
			}
		}
		.user-base{
			width: 100%;
			position: absolute;
			top: 200upx;
			.user-order-chunk{
				width: 100%;
				padding: 0 20upx;
				box-sizing: border-box;
				.user-order-form{
					width: 100%;
					padding: 0 20upx;
					box-sizing: border-box;
					border-radius: 5upx;
					.user-order-form-top{
						width: 100%;
						height: 80upx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						border-bottom: solid 2upx #eee;
						box-sizing: border-box;
						.user-order-form-top-r{
							display: flex;
							align-items: center;
						}
					}
					.user-order-form-list{
						padding: 20upx 0;
						display: flex;
						.user-order-form-item{
							width: 25%;
							text-align: center;
							.user-order-form-item-text{
								margin-top: 10upx;
							}
						}
					}
				}
			}
			.user-cell{
				width: 100%;
				margin-top: 20upx;
			}
		}
	}
</style>
